<script lang="ts" setup>
import { ref } from 'vue';
import useStore from '@/store';
import { storeToRefs } from 'pinia';
const { comments } = useStore();
const { list } = storeToRefs(comments);
const { getAllCommentOfPost } = comments;
const props = defineProps<{
	idx: number,
	prime: boolean
}>();
const editing = ref(false);
const emit = defineEmits(["enterEditing", "exitEditing", "checkSupBox"]);
const handleEnter = () => {
	editing.value = true;
	emit("enterEditing");
}
const handleExit = () => {
	editing.value = false;
	emit("exitEditing");
}
const handleCheck = () => {
	getAllCommentOfPost(list.value[props.idx].commentId, 2);
	emit("checkSupBox");
}
</script>

<template>
	<div class="comment-bar-footer">
		<span v-if="prime && list[props.idx].commentRefNum > 0" @click="handleCheck" class="comment-bar-footer-left">
			共有{{ list[props.idx].commentRefNum }}条评论，点击查看</span>
		<span v-if="!editing" @click="handleEnter">回复</span>
		<span v-else @click="handleExit">收起</span>
	</div>
</template>

<style lang="scss" scoped>
@import "@/assets/scss";

.comment-bar-footer {
	width: 100%;
	@include clearfix;

	span {
		float: right;
		cursor: pointer;
		color: #859ec5;
	}

	span:hover {
		color: $theme;
	}

	.comment-bar-footer-left {
		padding-left: 40px;
		float: left;
	}
}
</style>